<script setup>
import { reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// ------------------------------数据
let users = reactive([
    {
       num:1,id:13,zhiboname:'陕西延安在线上播',avatar:'/tx01.jpg',kind:'百姓电台'
    },
    {
        num:2,id:14,zhiboname:'陕西延安',avatar:'/tx01.jpg',kind:'城市文传'
    },
    {
        num:3,id:2,zhiboname:'陕西榆林在线上播',avatar:'/tx01.jpg',kind:'百姓电台'
    },
    {
        num:4,id:15,zhiboname:'陕西榆林',avatar:'/tx01.jpg',kind:'城市文传'
    },
    {
        num:5,id:3,zhiboname:'陕西西安在线上播',avatar:'/tx01.jpg',kind:'百姓电台'
    },
    {
        num:6,id:16,zhiboname:'陕西西安',avatar:'/tx01.jpg',kind:'城市文传'
    },
    {
        num:7,id:4,zhiboname:'陕西铜川在线上播',avatar:'/tx01.jpg',kind:'百姓电台'
    },
    {
        num:8,id:17,zhiboname:'陕西汉中在线上播',avatar:'/tx01.jpg',kind:'城市文传'
    },
    {
        num:9,id:5,zhiboname:'陕西铜川',avatar:'/tx01.jpg',kind:'百姓电台'
    },
    {
        num:10,id:18,zhiboname:'陕西咸阳在线上播',avatar:'/tx01.jpg',kind:'城市文传'
    },
    {
        num:11,id:7,zhiboname:'陕西咸阳',avatar:'/tx01.jpg',kind:'百姓电台'
    },
    {
        num:12,id:19,zhiboname:'陕西商洛在线上播',avatar:'/tx01.jpg',kind:'城市文传'
    },
    {
        num:13,id:8,zhiboname:'陕西商洛',avatar:'/tx01.jpg',kind:'百姓电台'
    },
    {
        num:14,id:20,zhiboname:'陕西宝鸡在线上播',avatar:'/tx01.jpg',kind:'城市文传'
    },
    {
        num:15,id:9,zhiboname:'陕西宝鸡',avatar:'/tx01.jpg',kind:'百姓电台'
    }
])

// ------------------------ 分页
import { ref } from 'vue'
const currentPage4 = ref(4)
const pageSize4 = ref(100)
const size = ref('default')
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}
//-------------------------删除操作
function showConfirm(user){
    ElMessageBox.confirm(
    '确定要删除用户' + user.username + '用户吗?',
    '警告信息',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      deleteUser(user)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '管理员取消了删除',
      })
    })

}

//删除用户的函数
function deleteUser(user) {
    let index = users.findIndex(item => item.id == user.id)
    users.splice(index, 1)
    ElMessage({
        type: 'info',
        message: '管理员成功删除了用户' + user.username,
      })
}


// ---------------------- 新增用户操作
import DialogUserCreate from '@/components/DialogUserCreate.vue';
//声明变量控制弹窗显示和隐藏
let userDialogCreate = ref(false)
//准备函数显示对话框
function showCreateDialog(){
    userDialogCreate.value = true
}
//准备函数隐藏对话框
function hideCreateDialog(){
    userDialogCreate.value = false
}

//新增用户数据:参数user就是子组件告诉父组件要新增的用户
function createUser(user){
     //计算新用户的id
     let id = users[0].id + 1
     //复制一份用户数据
     let newUser = {...user}
     //给新数据添加id属性
     newUser.id = id
     //新增用户
     users.unshift(newUser)
}

</script>
<template>
    <div class="p-header">
        <h3>直播管理</h3>
        <el-button type="primary" @click="showCreateDialog">添加</el-button>
    </div>
    <!-- 新增用户弹窗 -->
     <DialogUserCreate :dialogFormVisible="userDialogCreate"
     @createUserEvent="createUser"
     @closeCreateEvent="hideCreateDialog"></DialogUserCreate>

    <el-divider>直播信息展示</el-divider>
    <el-table :data="users" style="width: 100%">
        <el-table-column label="排序" prop="num" width="100"/>
        <el-table-column label="ID" prop="id" width="100"/>
        <el-table-column label="名称" prop="zhiboname" width="300"/>
        <el-table-column label="图标" prop="avator" width="100">
            <template #default="{ row }">
                <el-avatar :src="row.avatar" :size="35"/>
            </template>
        </el-table-column>
        <el-table-column label="分类" prop="kind" width="270"/>
        
        <!-- {
        id: 40006, username: 'wx_17765007861', nickname: 'Eluck', avator: '', phone: '',
        balance: 50, cumCon: 0, ticket: 0.00, cumTicket: 0,
        invitation: '2CE0F8', regDevice: 'android',
        regTime: '2024-08-26 10:08:02',
        lastLogin: '2024-08-26 12:30:12',
        lastIp: '223.104.205.215',
        status: 0
    } -->
        <el-table-column align="right" fixed="right" width="220">
            <template #default="scope">
                <el-button-group>
                    <el-button type="success" size="small">编辑</el-button>
                    <el-button type="danger" size="small" @click="showConfirm(scope.row)">删除</el-button>
                </el-button-group>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
      background
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>
<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.el-pagination{
    margin-top:20px;
}
.p-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}
</style>